<template>
	<view class="empire-image__vertical" @click="handleClick">
		<view class="empire-image__box" :style="{ width, height }">
			<image class="empire-image" :src="src" mode="scaleToFill"></image>
		</view>
		<view class="empire-image__label">
			<text class="empire-mall__title-two">{{ title }}</text>
			<view v-if="$slots.default" class="empire-mall__price">
				<slot></slot>
			</view>
			<view v-if="$slots.description">
				<slot name="description"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	width: {
		type: String,
		default: '190rpx'
	},
	height: {
		type: String,
		default: '190rpx'
	},
	src: {
		type: String,
		default: undefined
	},
	title: {
		type: String,
		default: undefined
	},
	to: {
		// {path:'/path',query:{}} | '/path'
		type: [String, Object],
		default: undefined
	}
});

function handleClick() {
	if (typeof props.to === 'string') {
		uni.navigateTo({
			url: props.to,
			success(res) {
				console.log(res);
				// res.eventChannel.emit()
			}
		});
	} else {
		const { path, query } = props.to || {};
		if (path) {
			uni.navigateTo({
				url: path,
				success(res) {
					console.log(query);
					// res.eventChannel.emit()
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.empire-image__vertical {
	display: grid;
	align-items: center;
	justify-content: center;
}
.empire-image__box {
	align-self: center;
	justify-self: center;
	border-radius: 12rpx;
}
.empire-image {
	width: 100%;
	height: 100%;
}
.empire-image__label {
	display: grid;
	grid-template-rows: 2fr 1fr 1fr;
	margin-top: 20rpx;
}
</style>
